<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1200px"
      top="10vh"
      :append-to-body="true"
    >
      <div slot="title" class="headerTitle">
        <span class="title">规划方案详情-</span>
        <span class="subtitle">{{ dialogTitle }}</span>
      </div>
      <div class="model-view">
        <div class="chartBox">
          <img src="./testPic.png" />
        </div>
        <div class="contentBox">
          <el-form ref="form" :model="diglogFormData" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="规划节点：" label-width="100px">
                  <!-- <el-input v-model="form.planningNode"></el-input> -->
                  <el-select
                    v-model="diglogFormData.planningNode"
                    placeholder="请选择规划节点"
                    style="width: 100%"
                  >
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12"></el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="规划功率：" label-width="100px">
                  <el-input
                    placeholder="请输入额定容量"
                    v-model="diglogFormData.ratedCapacity"
                  >
                    <template slot="append">kW</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规划容量：" label-width="100px">
                  <el-input
                    placeholder="请输入额定功率"
                    v-model="diglogFormData.ratedPower"
                  >
                    <template slot="append">kWh</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" class="saveBtn" @click="saveFn()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ConfigurationRevisionEdit",
  model: {},
  props: {
    dialogTitle: {
      type: String,
      default: "规划方案详情",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    diglogFormData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },

  created() {},
  methods: {
    saveFn() {
      // this.dialogVisible = false;
      // this.$confirm("是否进行校核操作?", "校核提示窗", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      //   type: "warning",
      // })
      //   .then(() => {
      //     this.$message({
      //       type: "success",
      //       message: "删除成功!",
      //     });
      //   })
      //   .catch(() => {
      //     this.$message({
      //       type: "info",
      //       message: "已取消删除",
      //     });
      //   });

      const h = this.$createElement;
      this.$msgbox({
        title: "校核提示窗",
        message: h("div", null, [
          h("div", { class: "ConfigurationRevisionTitle" }, [
            h("i", {
              class: "el-icon-warning",
              style: "color:#ff9900;font-size:24px",
            }),
            h(
              "span",
              {
                style:
                  "color: #666;font-size:14px;font-weight:bold;margin-left:5px",
              },
              "是否进行校核操作？ "
            ),
          ]),
          h(
            "p",
            { style: "color: #999;font-size:12px" },
            "点击确认后可跳转至校核配置页面"
          ),
        ]),
        // message: h("p", null, [
        //   h("span", null, "内容可以是 "),
        //   h("i", { style: "color: teal" }, "VNode"),
        // ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        confirmButtonClass: "ConfigurationRevisionConfirmBtn",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$message({
          type: "info",
          message: "action: " + action,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.saveBtn {
  background: #00796a;
  color: #fff;
}

.chartBox {
  width: 100%;
  display: flex;
  justify-content: center;
}

.contentBox {
  margin-top: 10vh;
}

::deep .el-button--primary {
  background: #00796a !important;
}

.headerTitle {
  .title {
    font-size: 16px;
  }
  .subtitle {
    color: #666;
  }
}
</style>

<style lang="scss">
.ConfigurationRevisionConfirmBtn {
  background: #00796a !important;
  color: #fff !important;
}
.ConfigurationRevisionTitle {
  line-height: 24px;
  display: flex;
}
</style>
